<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>登录</title>
		<link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
		<link rel="stylesheet" href="./bootstrap/bootstrap-icons.css" />
		<link rel="stylesheet" href="./css/common.css" />
		<link rel="stylesheet" href="./css/login.css" />
	</head>
	<body class="application application-offset">
		<div class="container-fluid container-application">
			<div class="main-content position-relative">
				<!-- Page content -->
				<div class="page-content">
					<div class="min-vh-100 py-5 d-flex align-items-center">
						<div class="w-100">
							<div class="row justify-content-center">
								<div class="col-sm-8 col-lg-4">
									<div class="card shadow zindex-100 mb-0">
										<div class="card-body px-md-5 py-5">
											<div class="mb-5">
												<h6 class="h3">传智教育-登录</h6>
											</div>
											<span class="clearfix"></span>
											<form role="form" autocomplete="off">
												<div class="form-group">
													<label class="form-control-label">账号</label>
													<div class="input-group input-group-merge">
														<div class="input-group-prepend">
															<span class="input-group-text"><i class="bi bi-person"></i></span>
														</div>
														<input name="username" type="text" class="form-control" id="input-email" placeholder="请输入账号" />
													</div>
												</div>
												<div class="form-group mb-4">
													<div class="d-flex align-items-center justify-content-between">
														<div>
															<label class="form-control-label">密码</label>
														</div>
														<div class="mb-2">
															<a href="javascript:;" class="small text-muted text-underline--dashed border-primary">忘记密码</a>
														</div>
													</div>
													<div class="input-group input-group-merge">
														<div class="input-group-prepend">
															<span class="input-group-text"><i class="bi bi-key"></i></span>
														</div>
														<input name="password" type="password" class="form-control" id="input-password" placeholder="请输入密码" />
														<div class="input-group-append">
															<span class="input-group-text">
																<a href="javascript:;" data-toggle="password-text" data-target="#input-password">
																	<i class="bi bi-eye-fill text-blue"></i>
																</a>
															</span>
														</div>
													</div>
												</div>
												<div class="mt-4">
													<button id="btn-login" type="button" class="btn btn-sm btn-info btn-icon btn-blue rounded-pill">
														<span class="btn-inner--text">登录</span>
														<span class="btn-inner--icon"><i class="bi bi-arrow-right"></i></span>
													</button>
												</div>
											</form>
										</div>
										<div class="card-footer px-md-5"><small>没有注册？</small> <a href="./register.html" class="small font-weight-bold text-blue">创建账号</a></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- toast -->
		<div class="position-fixed top-0 start-50 pt-4" style="z-index: 999; transform: translateX(-50%)">
			<div id="myToast" class="toast bg-rgba">
				<div class="toast-body">提示消息</div>
			</div>
		</div>
		<script src="./bootstrap/bootstrap.min.js"></script>
		<script src="./lib/form-serialize.js"></script>
		<script src="./lib/axios.js"></script>
		<script src="./js/common.js"></script>
		<script>
			document.querySelector('#btn-login').onclick = async () => {
				// 获取表单数据
				const data = serialize(document.querySelector('form'), { hash: true })
				// 非空判断
				if (!(data.username && data.password)) {
					tip('不能为空')
					return
				}
				// 密码长度判断
				if (data.password.length < 6) {
					tip('密码长度小于6')
					return
				}
				try {
					// 发送注册请求
					const res = await axios({
						method: 'post',
						url: '/login',
						data,
					})
					// console.log(res)
					tip(res.data.message)
					// 本地存储
					localStorage.setItem('username', res.data.username)
					localStorage.setItem('token', res.data.token)
					location.assign('./index.html')
				} catch (error) {
					console.dir(error.response.data.message)
				}
			}
		</script>
	</body>
</html>
